<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <!-- 创建挂载根节点 -->
    <div id="root"></div>
</body>
<!-- 创建函数组件或类组件 -->
<!-- babel 识别 JSX的语法转换成对象 -->
<script type="text/babel">
    // function App() {

    //     return (
    //         <div>
    //             我是App根节点
    //         </div>
    //     )
    // }

    // // 获取根节点
    // let container=document.getElementById('root')
    // // 使用ReactDOM.createRoot/ReactDOM.createElement 将js对象转换为虚拟dom
    // let root=ReactDOM.createRoot(container)
    // // react中的render函数将虚拟dom转为jsx的语法
    // root.render(<App />)



    for(var i=1;i<=7;i++ ){
        for(var j=5;j>=1;j--){
            console.log('*');
        }
        console.log('/n');
    }
</script>

</html>